<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
    <link rel="shortcut icon" type="image/x-icon" href="assets/img/favicon.ico">
    <title>Preclinic - Medical & Hospital - Bootstrap 4 Admin Template</title>
    <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="assets/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="assets/css/select2.min.css">
    <link rel="stylesheet" type="text/css" href="assets/css/bootstrap-datetimepicker.min.css">
    <link rel="stylesheet" type="text/css" href="assets/css/style.css">
    <!--[if lt IE 9]>
    <script src="assets/js/html5shiv.min.js"></script>
    <script src="assets/js/respond.min.js"></script>
    <![endif]-->
</head>

<body>

<div class="content" id="doctors">
    <div class="row">
        <div class="col-sm-4 col-3">
            <h4 class="page-title">医生信息</h4>
        </div>
        <div class="col-sm-8 col-9 text-right m-b-20">
            <a href="javascript:$('#edit').show();" class="btn btn-primary btn-rounded float-right"><i
                    class="fa fa-plus"></i> 添加医生</a>
        </div>
    </div>
    <div class="row doctor-grid">
        <div class="col-md-4 col-sm-4  col-lg-3" v-for="(doctor,index) in doctors">
            <div class="profile-widget" :style="{background : doctorBackground(doctor.dim)}">
                <div class="doctor-img">
                    <a class="avatar" href="profile.html"><img alt="" :src="doctorImg(doctor.img)"></a>
                </div>
                <div class="dropdown profile-action">
                    <a href="#" class="action-icon dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i
                            class="fa fa-ellipsis-v"></i></a>
                    <div class="dropdown-menu dropdown-menu-right">
                        <a class="dropdown-item" @click="editDoctor(doctor,index);"><i class="fa fa-pencil m-r-5"></i>
                            编辑</a>
                        <a class="dropdown-item" href="javascript:update('doctor._id');" data-toggle="modal"
                           data-target="#delete_doctor"><i class="fa fa-trash-o m-r-5"></i>
                            <span v-if="doctor.dim == 1">入职</span><span v-else>离职</span>
                        </a>
                    </div>
                </div>
                <h4 class="doctor-name text-ellipsis"><a href="profile.html">{{doctor.name}}</a></h4>
                <div class="doc-prof">{{doctor.level}}</div>
                <div class="user-country">
                    <i class="fa fa-map-marker"></i>{{doctor.city}}
                </div>
            </div>
        </div>
    </div>
    <!--<div class="row">默认是加载全部的，所以注释掉了
        <div class="col-sm-12">
            <div class="see-all">
                <a class="see-all-btn" href="javascript:void(0);">Load More</a>
            </div>
        </div>
    </div>-->

    <div id="edit" class="col-lg-8 offset-lg-2"
         style="z-index: 1000; position: absolute; top: 50px; background: #fff; border: solid 1px #ccc; display: none;">
        <form id="doctorForm" enctype="multipart/form-data" method="post" action="/doctor/editDoctor">
            <input type="hidden" id="id" name="id" :value="doctor.id"/>
            <div class="form-group">
                <label>医生名字</label><span class="need_red"> *</span>
                <input class="form-control" type="text" id="name" name="name" :value="doctor.name">
            </div>
            <div class="row">
                <div class="col-md-3">
                    <img alt="" :src="doctorImg(doctor.img)">
                </div>
                <div class="col-md-9">
                    <label>医生照片</label>
                    <div>
                        <input class="form-control" type="hidden" name="img" :value="doctor.img">
                        <input class="form-control" type="file">
                        <small class="form-text text-muted">请上传jpg, gif, png格式，最大5M。</small>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <label>学位</label><span class="need_red"> *</span>
                        <select class="select" id="level" multiple="multiple" name="level" data-name="学位"
                                v-model="doctor.level">
                            <option>---请选择---</option>
                            <option v-for="level in levels" :value="level.name" :key="level.name">{{level.name}}
                            </option>
                        </select>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label>所在城市</label><span class="need_red"> *</span>
                        <input class="form-control" type="text" id="city" name="city" :value="doctor.city">
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label>简介</label>
                <textarea id="desc" name="desc" cols="30" rows="6" class="form-control">{{doctor.desc}}</textarea>
            </div>
            <div class="form-group">
                <label>标签 <small>(使用英文逗号分开)</small></label>
                <input type="text" id="tags" name="tags" placeholder="请输入标签" data-role="tagsinput" class="form-control"
                       :value="doctor.tags">
            </div>
            <div class="form-group">

                <div class="form-check form-check-inline">
                    <label class="display-block">状态</label><span class="need_red"> *</span>
                    <!--单选，其中一个有id-->
                    <input class="form-check-input" type="radio" name="dim" checked="true" value="0"
                           v-model="doctor.dim"/>
                    <label class="form-check-label" for="blog_active">在职</label>
                    <input class="form-check-input" type="radio" name="dim" value="1" v-model="doctor.dim"/>
                    <label class="form-check-label" for="blog_inactive">离职</label>
                </div>
            </div>
            <div class="m-t-20 text-center">
                <a @click="submit" href="javascript:void();" class="btn btn-primary submit-btn"><i
                        class="fa fa-plus"></i><i id="addBtn">添加</i></a>
                <a @click="cancelDoctor" href="javascript:void();" class="btn btn-primary submit-btn"><i
                        class="fa fa-plus"></i>取消</a>
            </div>
        </form>
    </div>
</div>


<script src="assets/js/vue.global.js"></script>
<script src="assets/js/jquery-3.2.1.min.js"></script>
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/jquery.slimscroll.js"></script>
<script src="assets/js/select2.min.js"></script>
<script src="assets/js/moment.min.js"></script>
<script src="assets/js/bootstrap-datetimepicker.min.js"></script>
<script src="assets/js/app.js"></script>
<!--json data-->
<script type="text/javascript" src="json/doctors.json"></script>
<script type="text/javascript" src="json/levels.json"></script>
<script type="text/javascript" src="js/data.js"></script>
<script type="text/javascript">
	/*select2的问题
	
	case "SELECT": 
						var sel = $(obj).select2();//获取selectid
						if(obj.multiple){
							var options = obj.children;
							for(var i = 0; i < options.length; i++){
								if(value.indexOf(option.value) >= 0){
									sel.val(value).trigger("change");//设置 value 为four的 option 为选中状态
								}
							}
						}else{							
							sel.val(value).trigger("change");//设置 value 为four的 option 为选中状态							
						}
						sel.change();//告诉select2代码已经更新,需要重载  默认选择有值得第一个
						break;
	*/
	new Vue({
	  el: '#doctors',
	  data: {
		index:0,
		doctors: doctors,
		levels: levels,
		doctor:{"name":"罗纳德·雅各布斯","level":[],"img":"user.jpg"}
	  },
	  computed: {
		
	  },
	  methods: {
		doctorImg(img){
			return "assets/img/" + img;
		},
		doctorBackground(dim){
		  if (dim == 1) {
			  return "#ccc"
		  }else{
			return "";
		  }
		},
		submit(){
			//表单验证，元素的name与json的key相同
			var msg = checkForm($("#doctorForm")[0]);
			if(msg != null){
				alert(msg);
				return;
			}
			$('#edit').hide();
			//组装数据
			var formText = '{"' + $("#doctorForm").serialize().replace(/&/g,'","').replace(/=/g,'":"') + '"}';
			formText = decodeURI(formText);
			var newDoctor = JSON.parse(formText);
			var id = $("#id").val();
			if(id == ""){
				//新增
				doctors.push(newDoctor);
			}else{
				//修改
				Vue.set(this.doctors, this.index, newDoctor);
			}
			$('#addBtn').html("添加");
		},
		editDoctor(doctor, index){
			this.index = index;
			this.doctor = doctor;
			//编辑
			$('#addBtn').html("编辑");
			$('#edit').show();
		},
		cancelDoctor(){
			$('#edit').hide();
			this.doctor = {"name":"罗纳德·雅各布斯","level":[],"img":"user.jpg"};
			$('#addBtn').html("添加");
		}
	  }
	})

</script>
<!--json data-->
</body>
</html>